

let fs = document.querySelector( '.file-upload-container>.file-selector' );

let fcListener = {
    handleEvent(event){
        console.log( event.type );
        let t = event.target ;
        let file = t.files[0] ;
        console.log( file.name  );
        let fs = t.nextElementSibling ;
        console.log( fs );
        fs.setAttribute( 'title' , '点击这里选择文件');
        fs.innerHTML = file.name ;
    }
}

let fsListener = {
    handleEvent(event){
        console.log( event.type );
        event.stopPropagation();
        let t = event.target ;
        let fileInput = t.previousElementSibling ;
        fileInput.addEventListener( 'change' , fcListener , false );
        fileInput.click(); // 通过调用 input 的 click 函数来"模拟"点击操作
    }
}

fs.addEventListener( 'click' , fsListener , true );

let fuBtn = document.querySelector( '.file-upload-container>.file-upload-button' );

let upListener = {
    handleEvent(event){
        let t = event.target ;
        let f = t.parentElement.parentElement ;
        let fileInput = t.previousElementSibling.previousElementSibling ;
        if( fileInput.files.length > 0 ) {
            f.submit();
        } else {
            alert( '你丫没选文件还想提交？' );
        }
    }
}

fuBtn.addEventListener( 'click' , upListener , true );